<template>
  <div class="transfer-tree">
    <div class="div-left">
      <div class="div-title">组织架构</div>
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        :props="defaultProps"
        :load="loadNode"
        lazy
        node-key="id"
        :show-checkbox="true"
        :check-strictly="true"
        @check-change="handleCheckChange"
        ref="tree"
        :filter-node-method="filterNode"
        class="filter-tree"
        :default-expanded-keys="selectList"
      >
      <!-- default-expand-all -->
      </el-tree>
    </div>
    <div class="div-middle">
      <div class="div-btn">
        <wl-btn @click="add_right" icon="btn_zk2" angle="270" label="加入右方"></wl-btn>
      </div>
      <div class="div-btn btn-left">
        <wl-btn @click="add_left" icon="btn_zk2" angle="90" label="加入左方"></wl-btn>
      </div>
    </div>
    <div class="div-right">
      <div class="div-title">选择部门</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox  v-for="org in selectData" :label="org.id" :key="org.id" :value="org.id">{{org.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import * as Api from "src/api/net";
import { updateSelection } from "src/utils/list_utils";
export default {
  name: "common_button",
  props: {
    totalData: {
      type: Array,
      default: () => []
    },
    selectData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filterText: "",
      selection: [],
      checkList: [],
      selectList: [],
      defaultProps: {
        children: "child_list",
        label: "name",
        isLeaf: "leaf",
        id: "id"
      }
    };
  },
  mounted() {
    for (let i = 0; i < this.selectData.length; i++) {
      this.selectList.push(this.selectData[i].id);
    }
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    add_right() {
      for (let k = 0; k < this.selection.length; k++) {
        var flag = true;
        for (let i = 0; i < this.selectData.length; i++) {
          if (this.selectData[i].id == this.selection[k].id) {
            flag = false;
          }
        }
        if (flag) {
          this.selectData.push(this.selection[k]);
        }
      }
      this.$emit("rightChange", this.selectData);
    },
    add_left() {
      var list = [];
      for (let k = 0; k < this.selectData.length; k++) {
        var flag = true;
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.selectData[k].id == this.checkList[i]) {
            flag = false;
          }
        }
        if (flag) {
          list.push(this.selectData[k]);
        }
      }
      this.selectData = list;

      for (let i = 0; i < this.checkList.length; i++) {
        this.$refs.tree.setChecked(this.checkList[i], false, false);
      }

      this.checkList = [];
      this.$emit("leftChange", this.selectData);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.selection.push(data);
      } else {
        if (isNoEmpty(this.selection)) {
          for (let i = 0; i < this.selection.length; i++) {
            if (this.selection[i].id == data.id) {
              this.selection.splice(i, 1);
            }
          }
        }
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    isleaf(list) {
      if (isNoEmpty(list)) {
        for (let i = 0; i < list.length; i++) {
          if (isNoEmpty(list[i].child_list)) {
            list[i].leaf = false;
          } else {
            list[i].leaf = true;
          }

          if (isNoEmpty(this.selection)) {
            for (let i = 0; i < this.selection.length; i++) {
              if (this.selection[i].id == list[i].id) {
                list.splice(i, 1);
              }
            }
          }
        }
      }
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.isleaf(this.totalData);
        return resolve(this.totalData);
      }
      if (node.level !== 0 && isNoEmpty(node.data.child_list)) {
        var list = node.data.child_list;
        for (let i = 0; i < list.length; i++) {
          let sendData = {};
          sendData.curr_page = 1;
          sendData.page_size = 99999;
          sendData.parent = list[i].id;
          Api.AjaxPost(Config.ajaxUrl + "/dept/list.do", sendData, res => {
            if (isNoEmpty(res.data.data_list)) {
              list[i].leaf = false;
            } else {
              list[i].leaf = true;
            }

            if (i == list.length - 1) {
              return resolve(node.data.child_list);
            }
          });
        }
      } else if (node.level !== 0 && !isNoEmpty(node.data.child_list)) {
        let sendData = {};
        sendData.curr_page = 1;
        sendData.page_size = 99999;
        sendData.parent = node.data.id;
        Api.AjaxPost(Config.ajaxUrl + "/dept/list.do", sendData, res => {
          this.isleaf(res.data.data_list);
          return resolve(res.data.data_list);
        });
      }
      for (let i = 0; i < this.selectData.length; i++) {
        this.$refs.tree.setChecked(this.selectData[i], true, true);
      }
    }
  }
};
</script>

<style scoped>
.div-title {
  background: #f5f7fa;
}

.transfer-tree {
  display: flex;
  margin-top: 10px;
}

.div-left {
  width: 40%;
  height: 300px;
  border: 1px solid #dddddd;
  padding: 7px 15px;
  margin-left: -10%;
  overflow: auto;
}

.div-right {
  width: 40%;
  height: 300px;
  border: 1px solid #dddddd;
  padding: 7px 15px;
  margin-right: 5%;
  overflow: auto;
}

.div-middle {
  margin: 0 2%;
  padding-top: 12vh;
}

.btn-left {
  margin-top: 20%;
}
</style>
